<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>选择文件</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-tooltip class="uploadview" effect="dark" content="上传文件" placement="top-start">
                        <el-upload :action="uploadUrl2" :before-upload="uploadFileBefore"
                            :on-success="uploadFileHandleChange" :show-file-list="false" accept=".pdf">
                            <div class="uploadBtn">
                                <i class="el-icon-upload"></i>
                            </div>
                        </el-upload>
                    </el-tooltip>
                    <select v-model="obj.fileUrl" style="width: 196px">
                        <option value>请选择文件</option>
                        <option v-for="item in fileDataList" :value="item.url" :key="item.name">
                            {{ item.name }}
                        </option>
                    </select>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
// import { query, create } from "@/api/resource";

export default {
    name: "FileDataForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setColorChange: Function,
        getFileList: Function,
        fileDataList: Array,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    data() {
        return {
            uploadUrl2: process.env.VUE_APP_UPLOAD_API,
            uploadDataform: {},
        }
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    methods: {
        uploadFileBefore(file) {
            if (file.size > 1000 * 1000 * 30) {
                this.$message.error("上传文件不能大于30M");
                return false;
            }
        },
        uploadFileHandleChange(res, file, fileList) {
            if (res.code == 0) {
                this.uploadDataform.id = "";
                this.uploadDataform.url = res.data;
                this.uploadDataform.name = file.name;
                this.uploadDataform.type = 2;

                const tempDataForm = Object.assign({}, this.uploadDataform);
                create(tempDataForm).then((res) => {
                    if (res.data.code == 0) {
                        this.notifyMessage();
                        this.$emit("getFileList");
                        this.$message({
                            message: "上传成功",
                            type: "success",
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            } else {
                this.$message.error(res.message);
            }
        },
    }
}
</script>